<template>
  <list-layout channel="tools">
    <!-- <div class="list-top-text">
      {{$t('在线检测工具')}}
    </div> -->
    <div class="row tools-list justify-between">
      <list-item
        class="tools-list-item"
        v-for="(item,index) in data.docs" :key="index"
        :title="item.标题"
        :content="item.描述"
        :img="item.图片 && item.图片.id"
        :titleLines="2" :contentLines="3"
        :url="item.详情地址 || `/tools/${item.id}`"
        ></list-item>
        <!-- :url="`/tools/${item.id}`" -->
    </div>

    <div
      v-if="data && data.total === 0"
      class="no-data-label">
      <div class="absolute-center">
        {{$t('暂无数据')}}
      </div>
    </div>

    <pagination v-if="data && data.total" :data="data" @changed="pageChanged"></pagination>
  </list-layout>
</template>

<script>
import mixins from 'eis-admin-mixins';
import { RefreshOnLocaleChange } from '../../components/mixins/locale';
import listLayout from '../../components/listLayout.vue';
import listItem from '../../components/listItem.vue';
import pagination from '../../components/pagination.vue';

export default {
  name: 'ToolsList',
  mixins: [mixins.ObjectDataMixin, RefreshOnLocaleChange],
  components: {
    listItem,
    listLayout,
    pagination,
  },
  data() {
    return {
    };
  },
  methods: {
    pageChanged(p) {
      this.refreshData({ page: p });
    },
  },
};
</script>

<style lang="scss" scoped>
.tools-list {
  &-item {
    max-width: 540px;
    min-width: 540px;
  }
}
</style>

<style lang="scss">
.tools {
  &-list-item {
    height: 170px !important;
    .avatar .img{
      width: 218px !important;
      height: 130px !important;
    }
  }
}
</style>
